// 添加分页处理： 逻辑分页，假分页
// 假分页使用基于jquery的第三方插件； 真分页后台的查询针对 mybatis 第三方的插件： pagehelper
// 使用ajax进行查询操作
function queryAllUsers() {
    $.ajax({
        type: "get", // 请求的类型，等价于 form 表单的 method 属性
        url: "queryAllUsers", // 请求的服务器url，等价于 form 表单的 action 属性
        data: $("#queryForm").serialize(), // "username="+$("#username")+"&userpsw="+$("#userpsw"), 发送给服务器的数据
        success: function (data) { // 成功时的回调函数
            // 进行业务逻辑处理，进行 dom 操作，完成页面的据图更新
            // 解析ajax回调返回的data对象中的数据，然后将其显示到指定的位置
            if (data) {
                // 将查询的数据源进行假分页处理
                $("#queryPager").pagination({
                    dataSource: data,
                    pageSize: 5,
                    showGoInput: true,
                    showGoButton: true,
                    callback: function (pageData, pagination) {
                        // template method of yourself
                        var strMsg = "";
                        var strDate;
                        // 使用each循环遍历，json数组中的每个对象，并将每个对象的属性值取出进行显示
                        $.each(pageData, function (index, eachUserBean) {
                            strMsg += "<tr>";
                            strMsg += "<th scope='row'>" + (index + 1) + "</th>";
                            strMsg += "<td>" + eachUserBean.account + "</td>";
                            strMsg += "<td>" + eachUserBean.password + "</td>";
                            strMsg += "<td>" + eachUserBean.nickname + "</td>";
                            strMsg += "<td>" + eachUserBean.truename + "</td>";
                            strMsg += "<td>" + eachUserBean.provinceName + " " + eachUserBean.cityName + " " + eachUserBean.districtName + " " + eachUserBean.address + "</td>";
                            strMsg += "<td>" + eachUserBean.postcode + "</td>";
                            strMsg += "<td>" + eachUserBean.tel + "</td>";
                            strMsg += "<td>" + eachUserBean.sex + "</td>";
                            strMsg += "<td>" + eachUserBean.accumulatePoints + "</td>";
                            strMsg += "<td>" + eachUserBean.grade + "</td>";
                            strMsg += "<td>" + (eachUserBean.freeze==0?"否":"是") + "</td>";

                            strDate = new Date(eachUserBean.birth);
                            strMsg += "<td>" + strDate.getFullYear() + "-" + (strDate.getMonth()+1) + "-" + strDate.getDate() + "</td>";

                            strMsg += "<td><img src='" + eachUserBean.photo + "' width='50px' height='30px'></td>";
                            strMsg += "<td>" + "<button class='btn btn-sm btn-white' type='button' onclick='showEditUserModal(\""+eachUserBean.uid+"\")'>修改</button> <button class='btn btn-sm btn-white' type='button' onclick='deleteUser(\""+eachUserBean.uid+"\", this)'>删除</button>" + "</td>";
                            strMsg += "</tr>";
                        });
                        $("#showMsg").html(strMsg); // 局部刷新
                    }
                });
            }
        },
        error: function () {
            alert("出错啦");
        }
    });
}

////////////////////////////////////////////////////
// 显示新增的modal模态框
function showAddUserModal() {
    $("#gridSystemModalLabel").text("用户新增信息管理");
    $('#save').text('保存');
    $("#uid").val("");

    getProvince();

    getCityByProId();

    getDistrictByCityId();

    $('#userInfoModal').modal('show');
}

function getProvince() {
    $.ajax({
        type: "GET", // 请求方式
        url: "ajaxGetProvince", // 请求的服务器路径
        success: function (data) {
            let strProvince = "";
            $.each(data, function (index, province) {
                strProvince += "<option value='"+province.proId+"'>"+province.proName+"</option>";
            });
            $("#province").html(strProvince);
        },
        error: function () {
            alert("出错啦");
        }
    });
}

function getCityByProId(proId) {
    if (proId == null) proId = "110000";
    $.ajax({
        type: "GET", // 请求方式
        url: "ajaxGetCityByProId", // 请求的服务器路径
        data: "proId="+proId, // 发送给服务器的数据
        success: function (data) {
            let strCity = "";
            $.each(data, function (index, city) {
                if (index == 0) getDistrictByCityId(city.cityId);
                strCity += "<option value='"+city.cityId+"'>"+city.cityName+"</option>";
            });
            $("#city").html(strCity);
        },
        error: function () {
            alert("出错啦");
        }
    });
}

function getDistrictByCityId(cityId) {
    console.log("cityId"+cityId);
    if (cityId == null) cityId = "110100";
    $.ajax({
        type: "GET", // 请求方式
        url: "ajaxGetDistrictByCityId", // 请求的服务器路径
        data: "cityId="+cityId, // 发送给服务器的数据
        success: function (data) {
            let strDistrict = "";
            $.each(data, function (index, district) {
                strDistrict += "<option value='"+district.disId+"'>"+district.disName+"</option>";
            });
            $("#district").html(strDistrict);
        },
        error: function () {
            alert("出错啦");
        }
    });
}

// 点击模态框的保存按钮
function saveMe() {
    // 使用jquery的serialize方法并不能处理包含文件流的表单，这时，需要使用 dom 的 FormData 对象；
    // FormData是dom对象，而不是jquery对象；使用get方法或者 [] 将jquery对象转换为 dom 对象
    // 使用FormData进行文件上传操作，创建一个FormData对象（注意将jquery对象转换为dom对象）
    var formData = new FormData($("#insertform").get(0));
    // jquery实现ajax的操作
    $.ajax({
        type: "POST", // 请求方式
        url: "ajaxAddUser", // 请求的服务器路径
        data: formData, //$("#insertform").serialize(), // post请求的数据参数例如： userId=1&userName=zhangsan

        // 使用FormData对象作为ajax发送服务器的数据载体，需要设置以下两个参数
        contentType: false, // 防止request请求位置文件头上下文对象，如果进行处理，则会丢失文件流对象
        processData: false, // 防止request请求自动处理ForamData对象，如果进行处理，则会丢失文件流对象

        datatype: "Json", // 服务器响应的内容类型
        success: function (data) { // ajax请求成功时的回调函数
            // data 是json对象，而不是json字符串，所有data可以像数据集合一样进行遍历

            // 这里是进行ajax业务逻辑处理的地方
            // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
            // 体现了dom的局部更新，也是ajax优势
            // 遍历 data json对象
            if (data && data == 'AlreadyExists') {
                alert("用户名已存在！");
            } else if (data && data == 'ok') {
                alert("用户信息保存成功！");
                // 关闭modal，并调用ajax查询，显示刚才修改的数据记录
                $('#userInfoModal').modal('hide');
                // 查询显示信息
                queryAllUsers();
            } else {
                alert("用户信息保存失败，请刷新后重试！")
            }
        },
        error: function () {
            // ajax请求发生非错误时的回调函数
            alert("用户信息保存失败!")
        }
    });
}

//参数n为休眠时间，单位为毫秒:
function sleep(n) {
    var start = new Date().getTime();
    console.log('休眠前：' + start);
    while (true) {
        if (new Date().getTime() - start > n) {
            break;
        }
    }
    console.log('休眠后：' + new Date().getTime());
}

var beforeEditAccount;

// 显示修改的modal模态框
function showEditUserModal(updateUid) {
    $("#gridSystemModalLabel").text("用户修改信息管理");
    $('#save').text('修改');

    getProvince();

    $.ajax({
        type: "GET",
        url: "queryAllUsers",
        data: "uid="+updateUid,
        success: function (data) {
            // 省、市、区
            getCityByProId(data[0].province);
            console.log("data[0].city"+data[0].city)
        },
        error: function () {
            alert("出错啦");
        }
    });

    sleep(100);

    $.ajax({
        type: "GET",
        url: "queryAllUsers",
        data: "uid="+updateUid,
        success: function (data) {
            // 省、市、区
            $("#province option").each(function () {
                if ($(this).val() == data[0].province) {
                    $(this).attr("selected", "selected");
                }
            });
            $("#city option").each(function () {
                if ($(this).val() == data[0].city) {
                    $(this).attr("selected", "selected");
                }
            });
            getDistrictByCityId(data[0].city);
        },
        error: function () {
            alert("出错啦");
        }
    });

    sleep(100);

    $.ajax({
        type: "GET",
        url: "queryAllUsers",
        data: "uid="+updateUid,
        success: function (data) {
            $("#uid").val(data[0].uid);
            $("#account_edit").val(data[0].account);
            $("#password").val(data[0].password);
            $("#truename").val(data[0].truename);
            $("#nickname").val(data[0].nickname);

            // 省、市、区
            $("#district option").each(function () {
                if ($(this).val() == data[0].district) {
                    $(this).attr("selected", "selected");
                }
            });

            $("#address_edit").val(data[0].address);
            $("#defaultAddress").val(data[0].defaultAddress);
            $("#postcode").val(data[0].postcode);
            $("#tel_edit").val(data[0].tel);

            // 性别
            console.log(data[0].sex);
            if (data[0].sex == "男") {
                $("#sex1").attr("checked", "checked");
            } else {
                $("#sex2").attr("checked", "checked");
            }

            $("#accumulatePoints").val(data[0].accumulatePoints);
            $("#grade").val(data[0].grade);
            $("#freeze").val(data[0].freeze);

            // 日期
            if (data[0].birth != null) {
                $("#birth").val(data[0].birth.substr(0, 10));
            }

            // 头像
            // $("#freeze").val(data[0].freeze);

            beforeEditAccount = $("#account_edit").val();
        },
        error: function () {
            alert("出错啦");
        }
    });

    $('#userInfoModal').modal('show');
}

function editMe() {
    var formDataEdit = new FormData($("#insertform").get(0));

    console.log(beforeEditAccount);
    formDataEdit.append("beforeEditAccount", beforeEditAccount);
    $.ajax({
        type: "PUT", // 请求方式
        url: "ajaxEditUser", // 请求的服务器路径
        data: formDataEdit, //$("#insertform").serialize(), // post请求的数据参数例如： userId=1&userName=zhangsan

        // 使用FormData对象作为ajax发送服务器的数据载体，需要设置以下两个参数
        contentType: false, // 防止request请求位置文件头上下文对象，如果进行处理，则会丢失文件流对象
        processData: false, // 防止request请求自动处理ForamData对象，如果进行处理，则会丢失文件流对象

        datatype: "Json", // 服务器响应的内容类型
        success: function (data) { // ajax请求成功时的回调函数
            // data 是json对象，而不是json字符串，所有data可以像数据集合一样进行遍历

            // 这里是进行ajax业务逻辑处理的地方
            // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
            // 体现了dom的局部更新，也是ajax优势
            // 遍历 data json对象
            if (data && data == 'AlreadyExists') {
                alert("用户名已存在！");
            } else if (data && data == 'ok') {
                alert("用户信息修改成功！");
                // 关闭modal，并调用ajax查询，显示刚才修改的数据记录
                $('#userInfoModal').modal('hide');
                // 查询显示信息
                queryAllUsers();
            } else {
                alert("用户信息修改失败！")
            }
        },
        error: function () {
            // ajax请求发生非错误时的回调函数
            alert("用户信息修改失败!")
        }
    });
}

// 删除用户信息
function deleteUser(deleteUid, nowTr) {
    alert(nowTr);
    let flag = confirm("确认要删除吗");
    if (flag) {
        $.ajax({
            type: "DELETE",
            url: "ajaxDeleteUser",
            data: "deleteUid="+deleteUid,
            success: function (data) {
                if (data && data == 'ok') {
                    alert("删除成功！");
                    // $(nowTr).parent().parent().remove();
                    queryAllUsers();
                } else {
                    alert("删除失败！")
                }
            },
            error: function () {
                alert("出错啦");
            }
        });
    }
}

// 分配
function distribution() {
    let val = $('#save').text();
    if (val == "保存") {
        saveMe();
    } else {
        editMe();
    }
}